<template>
	<div class="app-home">
		<div class="imgBox homeBox">
		    <template v-if="themeName === 'dark'">
		        <video src="../../assets/img/home/dark.mp4" autoplay muted loop></video>
		        <img src="../../assets/img/home/logo_bottom_white.png" alt="">
		    </template>
			<template v-if="themeName === 'white'">
			    <video src="../../assets/img/home/white.mp4" autoplay muted loop width="56%"></video>
			    <img src="../../assets/img/home/logo_bottom_dark.png" alt="">
			</template>
		</div>
	</div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useGlobalStore } from '@/store/modules/global';

const globalStore = useGlobalStore();

const { themeName } = storeToRefs(globalStore);
</script>

<style lang="scss" scoped>
.app-home {
    @extend .center;
	width: 100%;
	height: 100%;
	.homeBox {
	    @extend .center;
		width: 66%;
		height: 80%;
		flex-direction: column;
		video{
            width: 56%;
		}
		img{
		    height: 10%;
		    margin-top: -12%;
		}
	}
}
</style>
